<!--  -->
<template>
    <div>
<!--内容-->
<div class="m-container">
    <div class="ui container m-pad-tb-big m-opacity ">
        <div class="ui segment">
            <div id="blog-form" class="ui form">
                <div class="required field m-margin-tb-large">
                    <div class="ui left labeled input">
                        <div class="ui selection compact teal basic dropdown label" style="z-index:1700;">
                            <input type="hidden" id="blogFlag">
                            <i class="dropdown icon"></i>
                            <div class="text">类型</div>
                            <div class="menu">
                                <div class="item" data-value="原创" id="flagA">原创</div>
                                <div class="item" data-value="转载" id="flagB">转载</div>
                                <div class="item" data-value="翻译" id="flagC">翻译</div>
                            </div>
                        </div>
                        <input type="text" v-model="blog.title" placeholder="标题">
                    </div>
                </div>


                <div class="required field" style="height:750px; overflow:scroll;">
                    <mavon-editor v-model="blog.content" style="height: 100%;width: 100%;" ></mavon-editor>
                </div>

                <div class="required two fields">
                    <div class="field">
                        <div class="ui left labeled action input required " style="z-index:1700;">
                            <!--compact缩小-->
                            <label class="ui compact teal basic label">分类</label>
                            <!--fluid充满-->
                            <div class="ui fluid selection dropdown">
                                <input type="hidden" id="blogTypeId">
                                <i class="dropdown icon"></i>
                                <div class="default text">分类</div>
                                <div class="menu">
                                    <div v-for="type in types" :key="type.id" class="item" :data-value="type.id" :id="'type'+type.id">{{type.name}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>

                <div class="required field">
                    <div class="ui left labeled input required ">
                        <label class="ui teal basic label">首图</label>
                        <input type="text" v-model="blog.firstPicture" placeholder="首图引用地址">
                    </div>
                </div>

                <div class="required field">
                    <textarea v-model="blog.description" placeholder="博客描述。。。" maxlength="200"></textarea>
                </div>


                <div class="inline fields">
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="recommend" v-model="blog.recommend">
                            <label for="recommend">推荐</label>
                        </div>
                    </div>

                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="shareStatement" v-model="blog.shareStatement">
                            <label for="shareStatement">转载声明</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="commentabled" v-model="blog.commentable">
                            <label for="commentabled">评论</label>
                        </div>
                    </div>
                </div>
                <div class="ui negative message" v-show="error">
                    <i class="close icon" @click="closeMsg"></i>
                    <div class="header">提示:</div>
                    <p>{{message}}</p>
                </div>
                <div class="ui container right aligned">
                    <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
                    <button type="button" id="save-btn" class="ui blue button" @click="submit(false)">保存</button>
                    <button type="button" id="publish-btn" class="ui teal button" @click="submit(true)">发布</button>
                </div>
            </div>
        </div>

    </div>
</div>
<br>
<br>
<br>
    </div>
</template>

<script>
// 引入makrdown
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
    props:["id"],
    data () {
        return {
            blog:{
                content:""
            },
            types:"",
            error:false,
            message:""
        };
    },
    methods:{
        submit(published){
            this.blog.flag = $('#blogFlag').val()
            this.blog.typeId = $('#blogTypeId').val()
            this.blog.published = published

            //表单验证不通过，不发送请求
            if(!this.checkBlog(this.blog)){
                this.message="请正确输入信息"
                this.error=true
                return
            }
            let url
            if(this.blog.id == -1){
                url="/admin/saveBlog"
            }else{
                url="/admin/updateBlog"
            }
            var _this = this
            _this.axios.post(url,{
                id:_this.blog.id,
                title:_this.blog.title,
                content:_this.blog.content,
                firstPicture:_this.blog.firstPicture,
                flag:_this.blog.flag,
                shareStatement:_this.blog.shareStatement,
                commentable:_this.blog.commentable,
                recommend:_this.blog.recommend,
                published:_this.blog.published,
                typeId:_this.blog.typeId,
                description:_this.blog.description
            }).then(res =>{
                if(res.data.status === 200){
                    alert(res.data.msg)
                    _this.$router.push({path:"/admin/blogs"})
                }else{
                    _this.message=res.data.msg
                    _this.error=true
                }
            }).catch(e =>{

            })
        },
        getAllTypes(){
            var _this = this
            _this.axios.get(
                "/admin/getAllType"
            ).then(res =>{
                _this.types = res.data.types
            }).catch(e =>{
                console.log(e)
            })
        },
        checkBlog(blog){
            if(blog.title.length==0||blog.content.length==0||blog.firstPicture.length==0
                ||blog.flag.length==0||blog.typeId.length==0||blog.description.length==0)
                return false
            return true
        },
        closeMsg(){
            this.error = false
        }
    },
    created(){
        this.getAllTypes()
        let blogId = this.id
        //新增博客，声明一个blog对象
        if(blogId == -1||blogId ==""){
            this.blog={
                id:-1,
                title:"",
                content:"",
                firstPicture:"",
                flag:"",
                shareStatement:false,
                commentable:false,
                recommend:false,
                typeId:"",
                description:""
            }
        }else{
        //修改博客，查询该博客信息
            var _this = this
            _this.axios.get("/admin/getDetailBlog",{
                params:{
                    id:blogId
                }
            }).then(res =>{
                _this.blog = res.data.blog
                //由于Semantic和Vue兼容问题。分类和flag显示不出来，采用手动触发
                if(this.blog.flag =="原创")
                    $("#flagA").click()
                else if(this.blog.flag=="转载")
                    $('#flagB').click()
                else
                    $('#flagC').click()
                $('#type'+this.blog.typeId).click()
            }).catch(e=>{
                console.log(e)
            })
        }
    },
    mounted(){
        $('.ui.dropdown').dropdown({})  
    },
    components:{
        mavonEditor
    },
}

</script>
<style scoped>
</style>
